<template>
  <section>
    <!--工具条-->
    <el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
      <el-form :inline="true" :model="filters">
        <el-form-item>
          <!-- 0：紧急采购 1：零星采购，2：合同采购 -->
          <el-button :type="type == 0?'primary':''" v-on:click="setType(0)">紧急采购</el-button>
        </el-form-item>
        <el-form-item>
          <el-button :type="type == 1?'primary':''" v-on:click="setType(1)">零星采购</el-button>
        </el-form-item>
        <el-form-item>
          <el-button :type="type == 2?'primary':''" v-on:click="setType(2)">合同采购</el-button>
        </el-form-item>
        <el-form-item>
          <companyDepart @getCompanyDepart="getCompanyDepart"></companyDepart>
        </el-form-item>
        <!-- <el-form-item>
          <el-select v-model="filters.pkCorp" filterable placeholder="请选择公司" @change="changeCompany">
            <el-option
              v-for="item in companyList"
              :key="item.pkCorp"
              :label="item.unitname"
              :value="item.pkCorp"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="filters.pkDeptdoc" filterable placeholder="请选择部门" @change="changeDepar">
            <el-option
              v-for="item in departList"
              :key="item.pkDeptdoc"
              :label="item.deptname"
              :value="item.pkDeptdoc"
            ></el-option>
          </el-select>
        </el-form-item>-->
        <div class="right-btns">
          <el-form-item>
            <el-button type="primary" v-on:click="addCompany">新增</el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-col>
    <el-col>
      <div class="flow-path">
        <el-timeline>
          <el-timeline-item
            :size="'large'"
            v-for="(activity, index) in list"
            :key="index"
            :timestamp="activity.timestamp"
            :hide-timestamp="true"
          >
            <el-card shadow="hover" :body-style="{ width: '300px',padding:'10px 20px'}">
              <p>{{index+1}}.审批人:{{activity.psnname}}({{activity.summary == 'Y'?'汇总':activity.isInquiry == 'Y'?'询价':'不询价'}})</p>
              <div class="editBtn">
                <el-button type="primary" plain size="small" @click="handEdit(activity)">修改</el-button>
                <el-button type="primary" plain size="small" @click="handDelete(activity)">删除</el-button>
              </div>
            </el-card>
          </el-timeline-item>
        </el-timeline>
        <!-- <el-steps align-center finish-status="success" style="width:100%">
          <el-step v-for="(activity, index) in list" :key="index">
            <template slot="title">
              <div
                class="accress-title"
              >审批人:{{activity.psnname}}({{activity.isInquiry == 'Y'?'询价':'不询价'}})</div>
            </template>
            <template slot="description">
              <div class="editBtn">
                <el-button type="primary" plain size="small" @click="handEdit(activity)">修改</el-button>
                <el-button type="primary" plain size="small" @click="handDelete(activity)">删除</el-button>
              </div>
            </template>
          </el-step>
        </el-steps>-->
      </div>
    </el-col>

    <!--新增 编辑界面-->
    <el-dialog title="审批流程" :visible.sync="addFormVisible" :close-on-click-modal="false">
      <addFlow @hideTotas="hideTotas" v-if="addFormVisible" :sendFormData="sendFormData"></addFlow>
    </el-dialog>
  </section>
</template>

<script>
import addFlow from "./components/addFlow";
import {
  companyList,
  approvalList,
  approvalDel,
  omJobSelectBdDeptdoc,
  omJobSelectBdCorp
} from "../../api/baseSetting";
import companyDepart from "../components/companyDepart";
export default {
  data() {
    return {
      filters: {
        pkCorp: "",
        pkDeptdoc: ""
      },
      companyList: [],
      pkDeptdoc: "", //部门编号
      departList: [], //部门列表
      addFormVisible: false,
      list: [],
      total: 0,
      page: 1,
      pageSize: 10,
      listLoading: false,
      sendFormData: {
        //点中的公司参数
      },
      type: 0 //0：紧急采购 1：零星采购，2：合同采购
    };
  },
  components: {
    addFlow,
    companyDepart
  },
  methods: {
    getCompanyDepart(e) {
      this.filters.pkCorp = e[2].value;
      this.filters.pkDeptdoc = e[3].pkDeptdoc;
      this.getList();
    },
    //公司列表
    getCompany() {
      omJobSelectBdCorp({}).then(res => {
        this.companyList = res;
      });
    },
    //获取部门列表
    getDepart(pkCorp) {
      omJobSelectBdDeptdoc({ pkCorp }).then(res => {
        this.departList = res;
      });
    },
    //改变公司
    changeCompany(e) {
      this.filters.pkDeptdoc = "";
      this.getDepart(e);
    },
    //改变部门
    changeDepar() {
      this.getList();
    },
    //点击删除
    handDelete(e) {
      let id = e.id;
      this.$confirm("确认删除该审批人", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          approvalDel([id]).then(res => {
            this.$message({
              type: "success",
              message: "删除成功!"
            });
            this.page = 1;
            this.getList();
          });
        })
        .catch(() => {
          this.$message({
            type: "fail",
            message: "删除失败!"
          });
          this.page = 1;
          this.getList();
        });
    },
    //点击编辑
    handEdit(detail) {
      this.sendFormData = detail;
      this.addFormVisible = true;
    },
    //分页
    handleCurrentChange(val) {
      this.page = val;
      this.getList();
    },
    //隐藏新增表单
    hideTotas() {
      this.addFormVisible = false;
      this.filters.companyName = "";
      this.page = 1;
      this.getList();
    },
    //点击新增
    addCompany() {
      this.addFormVisible = true;
      this.sendFormData = {};
    },
    //点击查询
    findList() {
      this.page = 1;
      this.getList();
    },
    //选择审批类型
    setType(type) {
      this.type = type;
      this.page = 1;
      if (this.filters.pkDeptdoc) {
        this.getList();
      }
    },
    //获取审批列表
    getList() {
      let para = Object.assign({}, this.filters);
      para.type = this.type;
      para.page = {
        page: this.page,
        pageSize: this.pageSize
      };
      // let para = {
      //   type: this.type,
      //   pkDeptdoc: this.pkDeptdoc,
      //   page: {
      //     page: this.page,
      //     pageSize: 10
      //   }
      // };
      this.listLoading = true;
      approvalList(para)
        .then(res => {
          this.listLoading = false;
          this.list = res;
          // let Arr = [];
          // for(let a=0;a<res.length;a++){

          // }
        })
        .catch(err => {
          this.listLoading = false;
        });
    }
  },
  mounted() {
    // this.getCompany();
    // this.getList();
    // this.getDepart();
  }
};
</script>
<style lang="less" scoped>
.right-btns {
  float: right;
  text-align: right;
}
.flow-path {
  text-align: center;
  display: flex;
  justify-content: center;
  // margin-top: 30px;
  margin-top: 2%;
  .accress-title {
    font-size: 16px;
    white-space: nowrap;
  }
  .editBtn {
    display: flex;
    width: 100%;
    justify-content: center;
    button {
      // width: 100%;
    }
  }
}
</style>
